import 'package:flutter/material.dart';

enum ChoiceOption {
  A,
  B,
  C,
}

enum AlertAction {
  Cancel,
  OK,
}

class DialogPage extends StatefulWidget {
  final Map<String, dynamic> arguments;
  DialogPage({Key key, this.arguments}) : super(key: key);

  @override
  _DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State<DialogPage> {
  String _choice = 'No choice';
  String _alertAction = 'No alert action';
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: this._scaffoldKey,
      appBar: AppBar(
        title: Text('DialogPage'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('SimpleDialog'),
            subtitle: Text('My Choice is: ${this._choice}'),
            onTap: () {
              this._showSimpleDialog();
            },
          ),
          Divider(height: 1.0),
          ListTile(
            title: Text('AlertDialog'),
            subtitle: Text('My alert action is: ${this._alertAction}'),
            onTap: () {
              this._showAlertDialog();
            },
          ),
          Divider(height: 1.0),
          ListTile(
            title: Text('Bottom Sheet'),
            onTap: () {
              this._showBbottomSheet();
            },
          ),
          Divider(height: 1.0),
          ListTile(
            title: Text('Modal Bottom Sheet'),
            onTap: () {
              this._showModalBbottomSheet();
            },
          ),
          Divider(height: 1.0),
          ListTile(
            title: Text('SnackBar'),
            onTap: () {
              final snackBar = SnackBar(
                content: Text('Loading...'),
                backgroundColor: Colors.red,
                // duration: Duration(seconds: 5),
                action: SnackBarAction(
                  label: 'Cancel',
                  onPressed: () {
                    print('Cancel click');
                  },
                ),
              );
              this._scaffoldKey.currentState.showSnackBar(snackBar);
            },
          ),
          Divider(height: 1.0),
          ListTile(
            title: Text('ExpansionPanelPage'),
            onTap: () {
              final r = PageRouteBuilder(pageBuilder: (_, __, ___) => ExpansionPanelPage());
              Navigator.push(context, r);
            },
          ),
          Divider(height: 1.0),
        ],
      ),
    );
  }

  /// _showSimpleDialog
  _showSimpleDialog() async {
    final option = await showDialog(
      context: context,
      builder: (BuildContext c) {
        return SimpleDialog(
          title: Text('SimpleDialog'),
          backgroundColor: Colors.yellow,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
          children: <Widget>[
            SimpleDialogOption(
              child: Text(ChoiceOption.A.toString()),
              onPressed: () {
                Navigator.pop(context, ChoiceOption.A);
              },
            ),
            SimpleDialogOption(
              child: Text(ChoiceOption.B.toString()),
              onPressed: () {
                Navigator.pop(context, ChoiceOption.B);
              },
            ),
            SimpleDialogOption(
              child: Text(ChoiceOption.C.toString()),
              onPressed: () {
                Navigator.pop(context, ChoiceOption.C);
              },
            ),
          ],
        );
      },
    );

    String c;

    switch (option) {
      case ChoiceOption.A:
        c = ChoiceOption.A.toString();
        break;
      case ChoiceOption.B:
        c = ChoiceOption.B.toString();
        break;
      case ChoiceOption.C:
        c = ChoiceOption.C.toString();
        break;
    }

    if (c != null) {
      setState(() {
        this._choice = c;
      });
    }
  }

  /// _showAlertDialog
  _showAlertDialog() async {
    final action = await showDialog(
      barrierDismissible: false, // 禁用灰色区域点击
      context: context,
      builder: (BuildContext c) {
        return AlertDialog(
          title: Text('AlertDialog'),
          backgroundColor: Colors.green,
          // titleTextStyle: TextStyle(color: Colors.red),
          content: Text('Enumerated types, often called enumerations or enums, are a special kind of class used to represent a fixed number of constant values.'),
          actions: <Widget>[
            FlatButton(
              child: Text('Cancel'),
              onPressed: () {
                Navigator.pop(context, AlertAction.Cancel);
              },
            ),
            FlatButton(
              child: Text('OK'),
              onPressed: () {
                Navigator.pop(context, AlertAction.OK);
              },
            ),
          ],
        );
      },
    );

    String a;

    switch (action) {
      case AlertAction.Cancel:
        a = AlertAction.Cancel.toString();
        break;
      case AlertAction.OK:
        a = AlertAction.OK.toString();
        break;
    }
    if (a != null) {
      setState(() {
        this._alertAction = a;
      });
    }
  }

  /// _showBbottomSheet
  _showBbottomSheet() {
    this._scaffoldKey.currentState.showBottomSheet((BuildContext c) {
      return this._playBar();
    });
  }

  /// _showModalBbottomSheet
  _showModalBbottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext c) {
        return Container(
          child: Column(
            children: <Widget>[
              this._playBar(),
              Container(
                height: 44.0,
                child: ListTile(
                  title: Text('Share'),
                ),
              ),
              Container(
                height: 44.0,
                child: ListTile(
                  title: Text('Collection'),
                ),
              ),
              Container(
                height: 44.0,
                child: ListTile(
                  title: Text('Like'),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _playBar() {
    return Container(
      height: 80.0,
      width: double.infinity,
      color: Color.fromRGBO(250, 220, 74, 1.0),
      child: Column(
        children: <Widget>[
          Divider(height: 1.0),
          Expanded(
            child: Row(
              children: <Widget>[
                SizedBox(width: 15.0),
                Icon(Icons.play_arrow, color: Color.fromRGBO(87, 186, 122, 1.0)),
                SizedBox(width: 20.0),
                Icon(Icons.pause, color: Color.fromRGBO(87, 186, 122, 1.0)),
                Expanded(child: Text('Kill this love', textAlign: TextAlign.center)),
                SizedBox(width: 15.0),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class ExpansionPanelModel {
  final String header;
  final Widget body;
  bool isExpanded;

  ExpansionPanelModel({this.header, this.body, this.isExpanded});
}

class ExpansionPanelPage extends StatefulWidget {
  ExpansionPanelPage({Key key}) : super(key: key);

  @override
  _ExpansionPanelPageState createState() => _ExpansionPanelPageState();
}

class _ExpansionPanelPageState extends State<ExpansionPanelPage> {
  List<ExpansionPanelModel> _pannelModels;

  @override
  void initState() {
    super.initState();

    Widget row(String title) {
      return Container(
        height: 30.0,
        width: double.infinity,
        alignment: Alignment.center,
        padding: EdgeInsets.only(left: 15.0, right: 15.0),
        child: Text(title),
      );
    }

    _pannelModels = <ExpansionPanelModel>[
      ExpansionPanelModel(
        header: 'Color',
        body: Column(
          children: <Widget>[
            Divider(height: 8.0),
            row('Red'),
            Divider(height: 8.0),
            row('Blue'),
            Divider(height: 8.0),
            row('Green'),
            SizedBox(height: 4.0),
          ],
        ),
        isExpanded: false,
      ),
      ExpansionPanelModel(
        header: 'Size',
        body: Column(
          children: <Widget>[
            Divider(height: 8.0),
            row('180*200'),
            Divider(height: 8.0),
            row('190*210'),
            Divider(height: 8.0),
            row('190*210'),
            Divider(height: 8.0),
            row('220*240'),
            SizedBox(height: 4.0),
          ],
        ),
        isExpanded: false,
      ),
      ExpansionPanelModel(
        header: 'Gender',
        body: Column(
          children: <Widget>[
            Divider(height: 8.0),
            row('Female'),
            Divider(height: 8.0),
            row('Male'),
            SizedBox(height: 4.0),
          ],
        ),
        isExpanded: false,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: Column(
          children: <Widget>[
            Container(
              height: kToolbarHeight + MediaQuery.of(context).padding.top,
              width: double.infinity,
              color: Colors.green,
              alignment: Alignment.bottomCenter,
              child: Container(
                height: kToolbarHeight,
                width: double.infinity,
                color: Colors.yellow,
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.only(left: 8.0),
                child: IconButton(
                  color: Colors.red,
                  icon: Icon(Icons.close),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  Container(
                    // color: Colors.red,
                    child: ExpansionPanelList(
                      animationDuration: Duration(milliseconds: 250),
                      expansionCallback: (int panelIndex, bool isExpanded) {
                        setState(() {
                          this._pannelModels[panelIndex].isExpanded = !isExpanded;
                        });
                      },
                      children: this._pannelModels.map(
                        (ExpansionPanelModel model) {
                          return ExpansionPanel(
                            isExpanded: model.isExpanded,
                            headerBuilder: (BuildContext context, bool isExpanded) {
                              return Container(
                                padding: EdgeInsets.symmetric(horizontal: 15.0),
                                height: 30.0,
                                child: Text(model.header),
                              );
                            },
                            body: model.body,
                          );
                        },
                      ).toList(),
                    ),
                  ),
                  SizedBox(height: 20),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
